<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>

  <script>
    const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');

    // x = r * Math.cos(角度);
    // y = r * Math.sin(角度);

    // 移动 canvas 中心坐标点到画布中心
    ctx.translate(200, 200);
    let r = 100;
    let angle = 0;

    setInterval(draw, 16.7);

    function draw() {
      ctx.clearRect(-200, -200, 400, 400);

      let x = r * Math.cos(angle);
      let y = r * Math.sin(angle);
      ctx.beginPath();
      ctx.fillStyle = 'red';
      ctx.arc(x, y, 10, 0, Math.PI * 2, true);
      ctx.fill();
      angle = angle + Math.PI / 180;
    }
  </script>
</body>

</html>